/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */

'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, DatePicker, Form, Popconfirm, Select, Table} from 'antd';
import styles from '../index.less';
import ViewTitle from '../../components/ViewTitle';
import FormBase from '../../components/Base/FormBase';
import notify from "../../components/NotificationExtra";
import {ModalView} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalCreateOrEditBankAccount from "./modal/ModalCreateOrEditBankAccount";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');

const {Option} = Select;
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            procure,
            finance
          }) => ({...user, ...global, ...procure, ...finance, ...dynamicLabel}))
export default class AccountMgr extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

    this.onDataLoad().then(orders => {
      this.setState({orders});
    });
  }

  async onDataLoad() {
    const res = await this.props.dispatch({
      type: 'finance/findAccounts',
      payload: {}
    });

    return res.result;
  }

  onCreateOrEdit = values => {
    ModalView.open(ModalCreateOrEditBankAccount,
      {
        title: '账号',
        width: '1080px'
      }, {
        values,
        callback: (payload) => {
          const type = values ? "finance/updateAccount" : "finance/createAccount";
          console.log('tttt',type,payload)
          this.props.dispatch({
            type,
            payload
          }).then(res => {
            console.log(res);
            this.requestReturn(res);
            this.componentDidMount();
          });
        }
      });
  };
  cols = () => {
    return [
      {
        title: '编码',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: '公司',
        dataIndex: 'division',
        key: 'division',
      },
      {
        title: '户名',
        dataIndex: 'accountName',
        key: 'accountName',
      },
      {
        title: '开户行',
        dataIndex: 'openingBank',
        key: 'openingBank'
      },
      {
        title: '账号',
        dataIndex: 'account',
        key: 'account'
      },
      {
        title: '初始余额',
        dataIndex: 'initBalance',
        key: 'initBalance'
      },
      {
        title: '当前结余',
        dataIndex: 'balance',
        key: 'balance'
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 120, fixed: 'right',
        render: (value, record) => {
          return (
            <span>
           {<a style={{marginRight: '6px'}}
               onClick={() => {
                 this.onCreateOrEdit(record);
               }}>编辑</a>}
              {<Popconfirm
                title="确认删除"
                onConfirm={() => {
                  const {code} = record;
                  this.props.dispatch({
                    type: 'finance/deleteAccount',
                    payload: {code}
                  }).then(res => {
                    this.requestReturn(res);
                    this.componentDidMount();
                  });
                }}
                okText="是"
                cancelText="否"
              >
                <a style={{marginRight: '6px'}}>删除</a>
              </Popconfirm>}
            </span>
          );
        }
      }
    ];
  };

  render() {
    const {_notify, form} = this.props;
    const {orders} = this.state;
    console.log("orders", orders);
    if (_notify) {
      notify(_notify);
    }

    return (
      <Form className={styles.content}>
        <ViewTitle
          title={`账户列表`}
          level={1}
          actions={<Button type={'primary'}
            onClick={() => {
              this.onCreateOrEdit(undefined);
            }}
          >添加</Button>}
        ></ViewTitle>

        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.cols()}
          dataSource={orders}
          scroll={{x: true}}
          pagination={true}
          //scroll={{ x: 1300 }}
        ></Table>

      </Form>
    );
  }
}
